<template>
	<view class="content">
		<view class="tab-wrapper">
			
		</view>
		<view class="sentence-list">
			<view class="item" v-for="item in dataList" :key="item.id">
				<view class="item__content">{{ item.content }}</view>
				<view class="item__translate">{{ item.translate }}</view>	
			</view>
		</view>
		<view class="more" v-if="moreStatus === 1">
			{{ moreStatus === 1 ? '加载中' : (moreStatus === 2 ? '加载完毕' : '') }}
		</view>
	</view>
</template>

<script>
import { list as getList } from "@/api/sentence.js";

export default {
	components: { 
		
	},
	data() {
		return {
			dataList: [],
			pageNumber: 1,
			pageSize: 10,
			moreStatus: 0,
		}
	},
	mounted() {
		this.pageNumber = 1;
		this.getDataList();
	},
	onPullDownRefresh() {
		this.pageNumber = 1;
		this.getDataList();
	},
	onReachBottom() {
		if (this.moreStatus === 2) {
			return;
		}
		++this.pageNumber;
		this.getDataList();
	},
	methods: {
		getDataList() {
			return getList({
				pageSize: this.pageSize,
				pageNumber: this.pageNumber,
			}).then(({ rows, total }) => {
				if (this.pageNumber <= 1) {
					this.dataList.splice(0, this.dataList.length, ...rows);
				} else {
					this.dataList.push(...rows);
				}
				this.moreStatus = rows.length < this.pageSize ? 2 : 1;
			}).catch(console.warn).finally(() => {
				uni.stopPullDownRefresh();
			});
		},
	
	}
}

</script>

<style lang="scss" scoped>
	.sentence-list {
		background-color: white;
		.item {
			margin-left: 20rpx;
			margin-right: 20rpx;
			padding-top: 10rpx;
			padding-bottom: 10rpx;
		}
		.item:hover {
			background-color: $km-border-color;
		}
		.item:nth-child(n + 2){
			border-top: 1rpx solid $km-border-color;
		}
	}
	.more {
		text-align: center;
		line-height: 90rpx;
	}
</style>
